<template>
  <div class="register">
    <van-notice-bar
      text="点菜就用易厨，美女荷官，在线点菜，现在注册，优惠多多哦"
      left-icon="volume-o"
      color="#f00"
      :speed="speed"
    />








    <van-nav-bar title="注册"/>
    <van-cell-group>
      <van-field
        v-model="username"
        required
        :error-message="error"
        clearable
        label="用户名"
     
        right-icon="question-o"
        placeholder="请输入用户名"
        @click-right-icon="$toast('question')"
     ref="name" />

      <van-field
        v-model="password"
        type="password"
        label="设置密码"
       
        :error-message="errorm"
        placeholder="请输入密码"
        required
     ref="pass" />
      <van-field
        v-model="password2"
        type="password"
        label="确认密码"
     
        :error-message="errorm2"
        placeholder="请确认密码"
        required
      />
    </van-cell-group>
    <van-row type="flex" justify="space-around">
      <van-col span="12" class="btn">
        <van-button type="primary" to="/login" id="login">登录</van-button>
      </van-col>
      <van-col span="12" class="btn">
        <van-button type="info" @click="todo()" id="register">注册</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'Qs'
export default {
  name: "Register",
  data() {
    return {
     username:'',
      password: "",
      password2: "",
      error: "",
      errorm: "",
      errorm2: "",
      speed: 100
    };
  },
  computed: {
     
  },
  mounted() {
   
  },
  watch: {
    //账号密码注册正则验证
    username: function(a) {
      let reg = /^[0-9a-zA-Z@_&]{6,18}$/;
      if (reg.test(a)) {
        this.error = "";
      } else if (a === "") {
        this.error = "用户名不能为空";
      } else if (a.length > 18) {
        this.error = "长度不能超过18位";
      } else {
        this.error = "用户名格式错误";
      }
    },
    password: function(a) {
      let reg = /^[0-9a-zA-Z!@#$%^&*()_+]{6,18}$/;
      if (reg.test(a)) {
        this.errorm = "";
        if (
          /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/.test(
            a
          )
        ) {
          this.errorm = "密码强度强";
        } else if (
          /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/.test(a)
        ) {
          this.errorm = "密码强度中";
        } else {
          this.errorm = "密码强度弱";
        }
      } else if (a.length > 18) {
        this.errorm = "长度不能超过18位";
      } else {
        this.errorm = "密码为数字字母组合不低于6位";
      }
    },
    password2: function(a) {
      if (this.password == this.password2) {
        this.errorm2 = "";
      } else {
        this.errorm2 = "密码不一致";
      }
    }
  },
  methods: {
       todo(){
     var username =  this.$refs.name.value
     var password =this.$refs.pass.value
     axios({
     	method:"post",
     	url:'http://10.8.158.36:8080/register.do',
     	data:qs.stringify({username,password})
     	
     }).then(res=>{
     	})
      }
    
  }
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register{
  font-size:20px;
}
.van-cell{
  font-size:20px;
}
.van-notice-bar {
  margin-bottom: 20px;
}
.van-cell-group {
  margin: 20px 0;
}
.btn {
  text-align: center;
}
#login,
#register {
  width: 100%;
  height: 40px;
  line-height: 30px;
}
</style>
